<template>
  <div class>
    <nav-header :headerTitle="'上传文章'" :navBgColor="'#fff'"></nav-header>
    <div class="nav-height"></div>
    <div class="article-upload">
      <textarea class="form-link" type="text" v-model="link" @input="inputLink" @change="inputLink"></textarea>
      <input type="text" hidden value="https://mp.weixin.qq.com/s/aKHP6t-DOUB79A7c-hRq8g" />
      <van-button
        :disabled="isDisabled"
        class="form-btn"
        type="default"
        :loading="isLoading"
        loading-text="加载中..."
        @click="tap2gainArticle"
      >获取文章内容</van-button>
      <div class="upload-ins">
        <p class="upload-ins-title">文章链接获取教程</p>
        <p class="upload-ins-tip1">系统支持微信公众号文章,您复制微信公众号的文章链接，粘贴到上方输入框，点击获取文章详情按钮，即可自动抓取文章内容。</p>
        <p class="upload-ins-tip2">获取文章链接的方法请参考下图：</p>
        <img class="upload-ins-img" src="@/assets/images/upload-ins.png" alt />
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import navHeader from "@/components/NavHeader";
import { Button, Dialog } from "vant";
Vue.use(Button).use(Dialog);
export default {
  name: "articleUpload",
  components: {
    navHeader
  },
  data() {
    return {
      link: "",
      isDisabled: true,
      isLoading: false
    };
  },
  mounted() {
    this.$setgoindex() ;
    window.localStorage.uniqueId = this.$route.query.uniqueId;
    Dialog.setDefaultOptions({
      messageAlign: "center",
      cancelButtonColor: "#303133",
      confirmButtonColor: "#FF2525",
      closeOnPopstate: true
    });
  },
  methods: {
    // tap2next(val) {
    //     console.log(val)
    // }
    inputLink() {
      if (this.link.length > 0) {
        this.isDisabled = false;
      } else {
        this.isDisabled = true;
      }
    },
    tap2gainArticle() {
      let data_link = this.link.trim();
      if (data_link.toLowerCase().indexOf("https://mp.weixin.qq.com") !== 0) {
        Dialog.alert({
          message:
            "您好，目前仅支持微信公众号文章哦！如果您有添加其他类型文章的需求，请回复客服添加客服微信，我们客服手动帮您添加。"
        }).then(() => {
          this.link = "";
        });
        return false;
      }
      this.isDisabled = true;
      this.isLoading = true;
      let sendData = {
        wxArticleUrl: data_link,
        uniqueId: window.localStorage.uniqueId
      };
      this.$http.post("article/getWxArticleInfo", sendData).then(
        res => {
          this.isDisabled = false;
          this.isLoading = false; 
          this.$router.push({
            path: "/adIndex/articleDetail",
            query: {
              articleId: res.data.articleId,
              articleTitle: "",
              shareUniqueId: window.localStorage.uniqueId
            }
          });
        },
        err => {
          this.isDisabled = false;
          this.isLoading = false;
          console.log(err);
        }
      );
    }
  }
};
</script>

<style scoped lang="scss">
.article-upload {
  width: 100%;
  background: #fff;
  .form-link {
    display: block;
    width: 626px;
    height: 180px;
    font-size: 34px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(48, 49, 51, 1);
    line-height: 48px;
    padding: 30px;
    border-radius: 8px;
    border: 2px solid rgba(237, 237, 237, 1);
    margin: 32px auto 0;
  }
  .form-btn {
    display: block;
    width: 562px;
    height: 88px;
    font-size: 34px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 88px;
    background: rgba(254, 37, 37, 1);
    border-radius: 44px;
    margin: 64px auto 0;
  }
  .upload-ins {
    width: 686px;
    margin: 88px auto;
    font-size: 34px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(48, 49, 51, 1);
    line-height: 48px;
    .upload-ins-title {
      font-size: 40px;
      font-family: PingFangSC-Medium;
      font-weight: 700;
      color: rgba(48, 49, 51, 1);
      line-height: 56px;
    }
    .upload-ins-tip1 {
      margin: 24px 0 0;
    }
    .upload-ins-tip2 {
      margin: 24px 0 32px;
    }
    .upload-ins-img {
      width: 100%;
    }
  }
}
</style>
